<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <base href="${base}">
    <meta charset="utf-8">
    <title>数据字典</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${base}/css/my.css" media="all">
    <link href="https://cdn.bootcss.com/jquery-contextmenu/2.6.3/jquery.contextMenu.min.css" rel="stylesheet">

</head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- 搜索栏 -->
		<div id="search-form" class="layui-form layui-card-header layuiadmin-card-header-auto">
			<div class="layui-form-pane">
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 88px;">类别值</label>
					<div class="layui-input-inline" style="width: 200px;">
						<input type="text" name="Q_LIKES_itemValue" class="layui-input" placeholder="机构名称" />
					</div>
					<div class="layui-input-inline">
						<div class="layui-btn-group">
							<button class="layui-btn" lay-submit lay-filter="LAY-search">
            					<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> 检索
          					</button>
							<button class="layui-btn layui-btn-warm" id="LAY-reset" lay-filter="LAY-reset">
            					<i class="layui-icon layui-icon-close layuiadmin-button-btn"></i> 清空
          					</button>
						</div>
					</div>
				</div>
			</div>
		</div>

        <div class="layui-row">
            <div class="layui-col-md2">
                <!-- 组织树 -->
                <ul id="orgTree"></ul>
            </div>
            <div class="layui-col-md10">
                <!-- 表格 -->
                <div class="layui-card-body">
                    <div style="padding-bottom:10px">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-normal layuiadmin-btn-list" data-type="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
                            <button class="layui-btn layui-btn-danger layuiadmin-btn-list" data-type="batchdel"><i class="layui-icon layui-icon layui-icon-delete"></i> 删除</button>
                        </div>
                        <span id="parentName" style="color:red;margin-left:20px;font-weight:bold;"></span>
                    </div>
                    <table id="LAY-table" lay-filter="LAY-table"></table>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 自定义模板 -->
<script type="text/html" id="tr-opts">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script src="${base}/js/lib/jquery-1.11.3.min.js"></script>
<script src="${base}/layuiadmin/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery-contextmenu/2.6.3/jquery.contextMenu.min.js"></script>

<script>
    layui.config({
        base: '${base}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index',
        jwt: '{/}${base}/js/lib/jwt',
        contextTree: '{/}${base}/js/lib/contextTree'
    }).use(['index', 'table', 'jwt', 'tree', 'contextTree'], function () {
        var table = layui.table;
        var form = layui.form;
       	var jwt = layui.jwt;
       	var $ = layui.$;
       	
        tableStart = 0;
        // 渲染表格
        table.render({
            elem: '#LAY-table',
            even: true,  //开启隔行背景
            //size: 'sm',  //小尺寸的表格
            height: 'full-180',  //容器高度
            cols: [[
                {checkbox: true},
                {title: '#', type:'numbers', align: 'center', width: 40},
                {title: '类别名称', align: 'center', field: 'itemName', width: 130},
                {title: '类别值', align: 'center', field: 'itemValue', width: 160},
                {title: '代码', align: 'center', field: 'code', width: 120},
                {title: '描述', align: 'center', field: 'note'},
                {title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#tr-opts'}
            ]],
            url: '${base}/system/dictionary/list',
            headers: {
                'Authorization': jwt.getCookie('token')
            },
            page: true,
            limits: [15, 30, 50, 100, 200],
            limit: 15,  //默认采用25
            loading: true,
            done: function (res, curr, count) {
            }
        });

        // 工具栏
        table.on('tool(LAY-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('您确定要删除行吗？', function (index) {
                    jwt.ajax({
                        url: '${base}/system/dictionary/multiDel',
                        data: {
                            ids: data.dicId
                        },
                        success: function (json) {
                            table.reload('LAY-table');
                            layer.msg('已删除');
                        }
                    });
                })
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑',
                    content: '${base}/system/dictionary/html/addLeaf?dictId=' + data.dicId + '&parentId=' + data.parentId,
                    maxmin: true,
                    area: ['550px', '400px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#LAY-form-submit");
                        submit.click();
                    }
                });
            }
        });

        // 同步请求，获得节点数据
        function getTreeNodes() {
            var nodes = [];
            jwt.ajax({
                url: '${base}/system/dictionary/treeAll',
                async: false,
                success: function (data) {
                    nodes = data;
                }
            });
            return nodes;
        }

        // 渲染组织树
        var nodes = getTreeNodes();
        var currentNode = nodes[0];
        var tree = layui.tree({
            elem: '#orgTree',
            nodes: nodes,
            click: function (node) {
                $('#parentName').html("类别：" + node.name);
                currentNode = node;
                table.reload('LAY-table', {
                    where: {
                        parentId: node.id
                    },
                    page: {curr: 1}
                });
            }
        });


        // 右键菜单
        layui.contextTree.menu({
            nodes: nodes,
            items: { //菜单列表配置
                add: {
                    name: "新建分类",
                    icon: "add",
                    handle: addTree
                },
                edit: {
                    name: "编辑分类",
                    icon: "edit",
                    handle: editTree
                },
                delete: {
                    name: "删除分类",
                    icon: "delete",
                    handle: deleteTree
                }
            }
        });

        //新建分类
        function addTree(node) {
            layer.open({
                type: 2,
                title: '增加类别',
                content: '${base}/system/dictionary/html/addTree?parentId=' + node.id,
                maxmin: true,
                area: ['500px', '350px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#LAY-form-submit");
                    submit.click();

                    // 重新加载树
                    $('#orgTree').empty();
                    tree.options.nodes = getTreeNodes();
                    currentNode = tree.options.nodes[0];
                    layui.tree(tree.options);
                }
            });
        }

        //编辑分类
        function editTree(node) {
            layer.open({
                type: 2,
                title: '编辑类别',
                content: '${base}/system/dictionary/html/editTree?dicId=' + node.id,
                maxmin: true,
                area: ['500px', '350px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#LAY-form-submit");
                    submit.click();

                    // 重新加载树
                    $('#orgTree').empty();
                    tree.options.nodes = getTreeNodes();
                    currentNode = tree.options.nodes[0];
                    layui.tree(tree.options);
                }
            });
        }

        function deleteTree(node) {
            console.log(JSON.stringify(node))
            layer.confirm('您确定要删除该分类吗？', function (index) {
                jwt.ajax({
                    url: '${base}/system/dictionary/deleteTree',
                    data: {
                        parentId: node.id
                    },
                    success: function (json) {
                        console.log(json);
                        if (!json.success) {
                            layer.msg(json.msg);
                        } else {
                            // 重新加载树
                            $('#orgTree').empty();
                            tree.options.nodes = getTreeNodes();
                            currentNode = tree.options.nodes[0];
                            layui.tree(tree.options);
                        }
                    }
                });
                layer.close(index);
            })
        }


        //监听搜索
        form.on('submit(LAY-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-table', {
                where: field,
                page: {curr: 1}
            });
        });
      //重置
    	$('#LAY-reset').click(function() {
    		$('#search-form :input').val('');
    	});

        var active = {
            batchdel: function () {
                debugger
                var checkStatus = table.checkStatus('LAY-table'),
                    checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    layer.msg('请选择数据');
                    return false;
                }

                var idArr = [];
                for (var i = 0; i < checkData.length; i++) {
                    idArr.push(checkData[i].dicId);
                }
                layer.confirm('确定删除吗？', function (index) {
                    jwt.ajax({
                        url: '${base}/system/dictionary/multiDel',
                        data: {
                            ids: idArr.join(',')
                        },
                        success: function (json) {
                            table.reload('LAY-table');
                            layer.msg('已删除');
                        }
                    });
                });
            },
            add: function () {
                console.log(currentNode);
                layer.open({
                    type: 2,
                    title: '增加类别',
                    content: '${base}/system/dictionary/html/addLeaf?parentId=' + currentNode.id,
                    maxmin: true,
                    area: ['550px', '400px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#LAY-form-submit");
                        submit.click();
                    }
                });
            }
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>
